import React from 'react';
import './TasksLogs.css';

const TasksLogs: React.FC = () => {
  return (
    <div className="tasks-logs-page">
      <div className="page-header">
        <div className="header-content">
          <h1>Tasks & Logs</h1>
          <p className="header-description">View asynchronous tasks and system logs</p>
        </div>
        <div className="header-actions">
          <button className="secondary">Clear Logs</button>
          <button className="primary">Export Logs</button>
        </div>
      </div>

      <div className="tasks-logs-container">
        <div className="tasks-section">
          <h2>Recent Tasks</h2>
          <div className="empty-state small">
            <div className="empty-icon">📋</div>
            <p>No recent tasks</p>
          </div>
        </div>

        <div className="logs-section">
          <h2>System Logs</h2>
          <div className="empty-state small">
            <div className="empty-icon">📝</div>
            <p>No system logs available</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TasksLogs;